<template>
    <!-- 地址管理 -->
    <view class="mine-box">
        <view class="address" v-for="i in num" :key="i">
            <view class="default">
                徐徐徐  158****8092
                <view v-if="addressDef == i" class="default-t">默认</view>
            </view>
            <view class="address-d">广州市-白云区-机场路1600-汇创意园B-302</view>
            <view class="action">
                <view class="item" @click="addressDef = i">
                    <image v-if="addressDef == i" class="home_icon_xz_z" src="../../static/images/home_icon_xz_z.png" mode=""></image>
                    <image v-else class="home_icon_xz_z" src="../../static/images/home_icon_xz_z1.png" mode=""></image>
                    <view>默认地址</view>
                </view>
                <view class="e-d">
                    <view class="item" @click="goto('./addressInsert')">
                        <image class="home_icon_xz_z" src="../../static/images/home_icon_bj_nor.png" mode=""></image>
                        <view>编辑</view>
                    </view>
                    <view class="item" style="margin-left: 60rpx;" @click="deleteFun(i)">
                        <image class="home_icon_xz_z" src="../../static/images/home_icon_ljt_nor.png" mode=""></image>
                        <view>删除</view>
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 140rpx;"></view>
        <view class="btns-box">
            <view class="btns" @click="goto('./addressInsert')">
                添加地址
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            addressDef: 1,
            num: 5
        }
    },
    watch:{},
    onLoad() {
        
    },
    methods: {
        goto(url){
            uni.navigateTo({
                url: url
            })
        },
        deleteFun(i){
            uni.showModal({
                title: '提示',
                content: '您确定要删除此项吗？',
                success: async (res) => {
                    if (res.confirm) {
                        this.num--
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.address{
    margin: 26rpx 26rpx 0 26rpx;
    padding: 30rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    color: #333;
    font-size: 32rpx;
    
    .default{
        display: flex;
        align-items: center;
        margin-bottom: 28rpx;
        height: 46rpx;
        
        .default-t{
            margin-left: 46rpx;
            padding: 6rpx 12rpx;
            border-radius: 6rpx;
            border: 1rpx solid #f04545;
            font-size: 24rpx;
            color: #f04545;
        }
    }
    .address-d{
        color: #999;
        padding-bottom: 52rpx;
        border-bottom: 1rpx solid #dfdfdf;
    }
}

.action{
    margin-top: 26rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    .home_icon_xz_z{
        width: 34rpx;
        height: 34rpx;
        
    }
    
    .e-d{
        display: flex;
        align-items: center;
    }
    
    .item{
        display: flex;
        align-items: center;
        view{
            font-size: 28rpx;
            height: 28rpx;
            line-height: 28rpx;
            margin-left: 20rpx;
        }
    }
}

.btns-box{
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    
    .btns{
        width: 600rpx;
        height: 80rpx;
        margin-left: 75rpx;
        border-radius: 20rpx;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f04545;
        color: #fff;
        
        &:active{
            background: #ef2b2b;
        }
    }
}

</style>
